<!DOCTYPE html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Drag and drop visual tests</title>
  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <script>
    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
    document.write(`<link rel="import" href="../../theme/${theme}/all-imports.html">`);
  </script>
  <script src="../../demo/grid-demo-data.js"></script>
</head>

<body>
  <style media="screen">
    .capture-block {
      display: inline-block;
      width: 800px;
    }
  </style>

  <div class="capture-block" id="sorting">
    <vaadin-grid drop-mode="on-top-or-between" rows-draggable>
      <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
      <vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
      <vaadin-grid-column path="email"></vaadin-grid-column>
    </vaadin-grid>
  </div>

  <script>
    const grid = document.querySelector('vaadin-grid');
    grid.rowDetailsRenderer = root => root.innerHTML = '<p>Details</p>';
    grid.items = Vaadin.GridDemo.users;
  </script>

</body>
